<template>
	<view class="content">
		<view class="line">
			<view v-show="dofinish" class="imageContent marginTop">
				<view v-for="(item,i) in imageList" :key="i" style="display: flex; padding: 0%; margin: 0%;">
					<image v-show="imageList.length==1" class="imageItem1" mode="widthFix" :src="item"
						@click="goBig(item)" style="border-radius: 20rpx;" />
					<image v-show="imageList.length!=1&&i==0" class="imageItem" mode="widthFix" :src="item"
						@click="goBig(item)" style="border-radius: 20rpx 0 0 0" />
					<image v-show="imageList.length!=1&&i==1" class="imageItem" mode="widthFix" :src="item"
						@click="goBig(item)" style="border-radius: 0  20rpx 0   0;" />
					<image v-show="imageList.length!=1&&i==2" class="imageItem" mode="widthFix" :src="item"
						@click="goBig(item)" style="border-radius: 0 0 0 20rpx;" />
					<image v-show="imageList.length!=1&&i==3" class="imageItem" mode="widthFix" :src="item"
						@click="goBig(item)" style="border-radius: 0 0 20rpx 0;" />
				</view>
			</view>
			<view v-show="!dofinish" class="loadingContent">
				<text class="textwhite16 ">正在生成中</text>
				<text class="textwhite16 marginTop"> {{percent}}%</text>
				<view class="progress-bg marginTop">
					<view :style="{'width':percent + '%'}" class="progress-content"></view>
				</view>
			</view>
		</view>
		<view class="padding"></view>
		<view v-show="goodContent" class="marginTop">
			<text class="textwhite16 marginTop">正向指令 </text>
			<view class="textBg padding marginTop textwhite16">
				<text> {{goodContent}}</text>
			</view>
		</view>
		<view v-show="badContent" class="marginTop">
			<text class="textwhite16 marginTop">反向指令 </text>
			<view class="textBg padding marginTop textwhite16">
				<text> {{badContent}}</text>
			</view>
		</view>

		<text class="textwhite16 marginTop"> 创作信息 </text>
		<view class="marginTop ">
			<view class="textBg">

				<view class="padding"> <text class="textwhite16">创作者</text> <text
						class="textwhite16 floatRight">{{author}}</text>
				</view>
				<view class="padding"> <text class="textwhite16">创建时间</text> <text
						class="textwhite16 floatRight">{{createTime}}</text></view>
				<view class="padding"> <text class="textwhite16">模型主题</text> <text
						class="textwhite16 floatRight">{{module}}</text></view>
				<view class="padding"> <text class="textwhite16">画面尺寸</text> <text
						class="textwhite16 floatRight">{{size}}</text></view>
				<view class="padding"> <text class="textwhite16">风格选择</text> <text
						class="textwhite16 floatRight">{{style}}</text></view>
				<view class="padding"> <text class="textwhite16">Seed(种子)</text> <text
						class="textwhite16 floatRight">无</text></view>
				<view class="padding"> <text class="textwhite16">图片提示</text> <text
						class="textwhite16 floatRight">无</text></view>
			</view>

		</view>

		<view class="cmdFalse padding">

		</view>

		<view class="cmd padding marginTop">
			<view v-show="dofinish&&showDo">
				<view class="textCmdTitle marginTop">升档</view>
				<view class="line marginTop">
					<view @click="clickOption(1)" class="btnSize padding grayBtnBg">S1</view>
					<view class="bigEmpty"></view>
					<view @click="clickOption(2)" class="btnSize marginLeft1 padding grayBtnBg">S2</view>
					<view class="bigEmpty"></view>
					<view @click="clickOption(3)" class="btnSize marginLeft1 padding grayBtnBg">S3</view>
					<view class="bigEmpty"></view>
					<view @click="clickOption(4)" class="btnSize marginLeft1 padding grayBtnBg">S4</view>
				</view>
				<view class="textCmdTitle marginTop">微调</view>
				<view class="line marginBottom marginTop">
					<view @click="clickOptionW(1)" class="btnSize padding grayBtnBg">W1</view>
					<view class="bigEmpty"></view>
					<view @click="clickOptionW(2)" class="btnSize marginLeft1 padding grayBtnBg">W2</view>
					<view class="bigEmpty"></view>
					<view @click="clickOptionW(3)" class="btnSize marginLeft1 padding grayBtnBg">W3</view>
					<view class="bigEmpty"></view>
					<view @click="clickOptionW(4)" class="btnSize marginLeft1 padding grayBtnBg">W4</view>
				</view>
				<view class="padding"></view>
			</view>
			
			<view class="line  textwhite10 " v-show="!dofinish">
				<view class="bigEmpty"></view>
			
				<view  class="line" @click="cancel()">
					<image class="icon-normal" src="../../static/deleterun.png"></image>
					<text class="marginLeft textwhite14">撤销</text>
					<view style="height: 65rpx;"></view>
				</view>
				
				<view class="bigEmpty"></view>
				<view class="bigEmpty"></view>
			
				<view  class="line" @click="backRun()">
					<image class="icon-normal" src="../../static/backrun.png"></image>
					<text class="marginLeft textwhite14">后台运行</text>
				</view>
		
				<view class="bigEmpty"></view>
			</view>
		
			<view class="line  textwhite10 " v-show="dofinish&&showDo">
				<view class="bigEmpty"></view>
				<view  @click="redo()">
					<view class="column">
						<image class="icon-normal" src="../../static/redo.png"></image>
						<text class="margin-top-0">重新生成</text>
					</view>
				</view>
				<view class="bigEmpty"></view>
				<view class="bigEmpty"></view>

				<view  class=" column" @click="save()">
					<image class="icon-normal" src="../../static/save.png"></image>
					<text class="margin-top-0">存入图库</text>
				</view>
				<view  class="bigEmpty"></view>
				<view  class="bigEmpty"></view>
				<view  @click="printProduct()">
					<text class="padding textwhite14 bg-more">&nbsp;我要打样&nbsp;</text>
				</view>
				<view class="bigEmpty"></view>
			</view>
			<view class="line textwhite10 " v-show="dofinish&&!showDo">
				<view class="bigEmpty"></view>
				<view  @click="redo()" class="column">
					<image class="icon-normal" src="../../static/redo.png"></image>
					<text class="margin-top-0">重新生成</text>
				</view>
				<view class="bigEmpty"></view>
				<view class="bigEmpty"></view>
				<view  @click="save()" class="column">

					<image class="icon-normal" src="../../static/save.png"></image>
					<text class="margin-top-0">存入图库</text>
				</view>
				<view class="bigEmpty"></view>
				<view class="bigEmpty"></view>
				<view  @click="publish()" class="column">
					<image class="icon-normal" src="../../static/white-find.png"></image>
					<text class="margin-top-0">发表作品</text>
				</view>
				<view class="bigEmpty"></view>
				<view class="bigEmpty"></view>

				<view  @click="printProduct()">
					<text class="padding textwhite14 bg-more">&nbsp;我要打样&nbsp;</text>
				</view>
				<view class="bigEmpty"></view>

			</view>
		</view>

	</view>
</template>

<script>
	import request from "/common/request.js"
	export default {
		data() {
			return {
				type: 0,
				id: 0,
				doing:true,
				showDo: false,
				nextDo: false,
				dofinish: false,
				percent: 0,
				imageList: [],
				timer: null,
				sizeTab1Index: 1,
				sizeTab2Index: 1,
				styleIndex: 1,
				moduleIndex: 1,
				goodContent: "",
				badContent: "",
				createTime: "",
				author: "",
				module: "",
				size: "",
				style: "",
				returnData: null,
				plateUserId: "",

			}
		},
		onShareAppMessage(res) {
			return {
				title: '设辑-产品设计智能生成AI',
				path: '/pages/HomePage/HomePage',
				imageUrl: '/static/black-logo.png'
			}
		},
		// 自定义页面的分享到朋友圈
		onShareTimeline(res) {
			return {
				title: '设辑-产品设计智能生成AI',
				path: '/pages/HomePage/HomePage',
				imageUrl: '/static/black-logo.png'
			}
		},
		onHide: function() {
			console.log("onhide")
		},
		onUnload: function() {
			console.log("onUnload")
		},
		onLoad: function(query) {

			this.id = query.id;
			this.oid = query.id;
			this.goodContent = query.goodContent;
			this.moduleIndex = query.moduleIndex;
			this.styleIndex = query.styleIndex;
			this.sizeTab2Index = query.sizeTab2Index;
			this.sizeTab1Index = query.sizeTab1Index;
			this.createTime = query.createTime;
			this.size = query.size;
			this.badContent = query.badContent;
			this.module = query.module;
			this.style = query.style;
			this.author = uni.getStorageSync("name")
		},
		onReady: function() {

			if (this.id > 0) {
				const that = this;
				that.imageList.splice(0, that.imageList.length)
				that.timer = setInterval(function() {
					console.log(that.percent)
					that.percent++;
					if (that.percent > 98) {
						that.percent = 99;
						if (that.timer != undefined) {
							clearInterval(that.timer)
							that.timer = null;
						}
					}
				}, 4000);
				setTimeout(function() {
					that.queryData();
				}, 1);
			}
		},
		methods: {
			printProduct() {

				// #ifdef MP

				// #endif

				// #ifdef MP
				uni.openCustomerServiceChat({
					corpId: "ww2fb1f9185008afa3",
					extInfo: {
						url: "https://work.weixin.qq.com/kfid/kfc2fde04b0fa7f99f6"
					},
					success: function(e) {
						console.log('e', e)
					},
					fail: function(err) {
						console.log('err', err)
					}
				})
				// #endif


			},

			goBig(url) {
				// uni.navigateTo({
				// 	url:"/pages/Test/Test?images="+this.imageList
				// })
				uni.previewImage({
					urls: this.imageList,
					current: this.imageList.indexOf(url)

				})

			},
			clickOption(num) {

				this.dofinish = false;
				this.percent = 0;
				this.type = 0
				const that = this;
				this.imageList = []
				const url = getApp().globalData.apiUrl + "/api/v1/job"
			console.log('returnData',that.returnData)
				request(url, "POST", {
						taskTag: "" + num,
						state: 6,
						type: 0,
						taskType: 2,
						productMode: that.returnData.productMode,
						plateUserId: this.plateUserId,
						taskRelationId: that.returnData.taskId,
						platformMessageId: that.returnData.platformMessageId,
						cmd: that.returnData.cmd,
						module: that.returnData.module,
						badContent: that.returnData.badContent,
						attachment: that.returnData.attachment
					}, uni.getStorageSync("token"))
					.then(function(res) {
						that.id = res.data.id;
						that.type = 1
						that.timer = setInterval(function() {
							console.log(that.percent)
							that.percent++;
							if (that.percent > 98) {
								that.percent = 99;
								if (that.timer != undefined) {
									clearInterval(that.timer)
									that.timer = null;
								}
							}
						}, 4000);
						that.queryData();
						console.log('返回正确回调', res)
					}, function(err) {
						console.log('返回错误回调', err)
					})

			},
			clickOptionW(num) {

				this.dofinish = false;
				this.percent = 0;
				this.type = 0
				const that = this;
				this.imageList = []
				const url = getApp().globalData.apiUrl + "/api/v1/job"
				request(url, "POST", {
						taskTag: "" + num,
						state: 7,
						type: 7,
						taskType: 3,
						productMode: that.returnData.productMode,
						plateUserId: this.plateUserId,
						taskRelationId: that.returnData.taskId,
						platformMessageId: that.returnData.platformMessageId,
						cmd: that.returnData.cmd,
						attachment: that.returnData.attachment,
						module: that.returnData.module,
						badContent: that.returnData.badContent,
					}, uni.getStorageSync("token"))
					.then(function(res) {
						that.id = res.data.id;
						
						that.timer = setInterval(function() {
							console.log(that.percent)
							that.percent++;
							if (that.percent > 98) {
								that.percent = 99;
								if (that.timer != undefined) {
									clearInterval(that.timer)
									that.timer = null;
								}
							}
						}, 4000);
						that.queryData();
						console.log('返回正确回调', res)
					}, function(err) {

						console.log('返回错误回调', err)
					})

			},

			redo() {
				this.type = 0;
				this.dofinish = false;
				this.percent = 0;
				this.type = 0
				const that = this;
				this.imageList = []
				// const url = getApp().globalData.apiUrl + "/api/v1/job/sameProduct";
				// request(url, "POST", {
				// 		parentId: item.job.id
				// 		// style: that.styleIndex,
				// 		// module: that.moduleIndex,
				// 		// width2height: that.sizeTab1Index,
				// 		// pictureWeight: pictureWeight,
				// 		// cmd: cmd,
				// 		// state: 0,
				// 		// type: that.productMode,
				// 		// attachment: attachment,
				// 		// style: that.styleIndex,
				// 		// productMode: that.productMode,
				// 		// module: that.moduleIndex,
				// 	}
				const url = getApp().globalData.apiUrl + "/api/v1/job"
				request(url, "POST", {
						state: 5,
						plateUserId: this.plateUserId,
						type: 7,
						taskType: 4,
						productMode: that.returnData.productMode,
						taskRelationId: that.returnData.taskId,
						platformMessageId: that.returnData.platformMessageId,
						cmd: that.returnData.cmd,
						attachment: that.returnData.attachment,
						badContent: that.returnData.badContent,
						module: that.returnData.module,
					}
					, uni.getStorageSync("token"))
					.then(function(res) {
						that.id = res.data.id;
						
						that.timer = setInterval(function() {
							console.log(that.percent)
							that.percent++;
							if (that.percent > 98) {
								that.percent = 99;
								if (that.timer != undefined) {
									clearInterval(that.timer)
									that.timer = null;
								}
							}
						}, 4000);
						that.queryData();
						console.log('返回正确回调', res)
					}, function(err) {

						console.log('返回错误回调', err)
					})

			},
			cancel() {
				uni.navigateBack()
			},
			publish() {
				const that = this;
				var size = "1:1";
				var sizeArray = [
					"1:1",
					"1:1",
					"1:2",
					"4:3",
					"3:4",
					"16:9",
					"9:16"
				]
				size = sizeArray[that.sizeTab1Index]
				var module = "精彩"
				var moduleArray = [
					"1:1",
					"1:1",
					"1:2",
					"1:2",
					"精彩",
					"细腻",
					"动漫",
					"创意",
					"照片"
				]
				module = moduleArray[that.moduleIndex]
				var style = "长焦镜头"
				var styleArray = [
					"长焦镜头",
					"长焦镜头",
					"手绘背景",
					"CG数字渲染",
					"哑光颜",
					"X光片",
					"矢量设计海报",
					"极简线条画",
					"炭笔画",
					"更多"
				]
				style = styleArray[that.styleIndex]
				var url1 =
					"/pages/PublishPicture/PublishPicture?id=" +
					this.id + '&goodContent=' + that.goodContent + '&moduleIndex=' +
					that.moduleIndex +
					'&styleIndex=' +
					that.styleIndex + "&sizeTab2Index=" +
					that.sizeTab2Index + "&sizeTab1Index=" + that.sizeTab1Index +
					"&createTime=" + that.createTime +
					"&size=" + size +
					"&style=" + style +
					"&badContent=" + that.badContent +
					"&image=" + that.imageList[0] +
					"&module=" + module
				uni.navigateTo({
					url: url1
				})
			},
			save() {
				const url = getApp().globalData.apiUrl + "/api/v1/myphoto";
				const that = this;
				request(url, "POST", {
						jobId: this.id
					}, uni.getStorageSync("token"))
					.then(function(res) {
						console.log('返回正确回调', res)
						uni.showToast({
							title: "保存成功"
						})
					}, function(err) {
						console.log('返回错误回调', err)
					})
			},
			backRun() {
				var firstTimeShowNotice = uni.getStorageSync("firstTimeShowNotice");
				if (!firstTimeShowNotice) {
					uni.showModal({
						title: "提示",
						content: "生成结果请移步”通知页“查看",
						complete: function() {
							uni.navigateBack()
						}
					})
					uni.setStorage({
						key: "firstTimeShowNotice",
						value: true
					})
				} else {
					uni.navigateBack()
				}

			},
			queryData() {

				const url = getApp().globalData.apiUrl + "/api/v1/job/" + this.id;
				const that = this;
				request(url, "GET", {

					}, uni.getStorageSync("token"))
					.then(function(res) {

						console.log('返回正确回调', res)

						var array = res.data.finalResultImages;
						if (array == undefined || array.length == 0) {
							setTimeout(function() {
								that.queryData()
							}, 10000);
						} else {
							that.plateUserId = res.data.plateUserId
							that.returnData = res.data;

							for (var i = 0; i < array.length && i < 4; i++) {
								that.imageList.push(array[i])
							}
							
							if (res.data.taskType == 1||res.data.taskType == 3||res.data.taskType == 4) {
								that.showDo = true
							}else{
								that.showDo = false
							}
							
							console.log('!that.nextDo&&that.type==1')
							console.log(!that.nextDo&&that.type==1)
							console.log('!that.nextDo')
							console.log(!that.nextDo)
							console.log('that.type')
							console.log(that.type)
							that.type = 1;
							that.dofinish = true;
							if (that.timer != undefined) {
								clearInterval(that.timer)
								that.timer = null;
							}
						}
					}, function(err) {
						that.queryData()
						console.log('返回错误回调', err)
					})
			}
		}
	}
</script>

<style>
	@import "../../common/uni.css";

	.progress-bg {
		width: 142.92px;
		height: 6.8px;
		border-radius: 20px;
		background: #D8D8D8;
	}

	.progress-content {
		height: 6.8px;
		border-radius: 20px;
		opacity: 1;
		background: #D000FF;
	}

	.btnSize {

		width: 20vw;
		height: 5vw;
		flex-direction: row;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.marginLeft1 {
		margin-left: 2vw;
	}

	.grayBtnBg {
		background: #4E5058;
		border-radius: 6px 6px 6px 6px;
	}


	.content {
		min-height: 100vh;
		padding: 15rpx;
		background: linear-gradient(166deg, #310BE8 0%, #0027FE 34%, #8200FF 64%, #D703FF 99%);
	}

	.progress-box {
		display: flex;
		height: 50rpx;
		margin-bottom: 60rpx;
	}

	.empty {
		width: 50upx;
		height: 0;
	}

	.loadingContent {
		border-radius: 14rpx;
		background: rgba(250, 250, 250, 0.3);
		width: 720rpx;
		height: 720rpx;
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
	}

	.imageContent {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		padding: 0%;
		margin: 0%;
		justify-content: center;
		align-content: center;
		border-radius: 14px;
	}

	.textBg {
		border-radius: 14rx;
		background: rgba(150, 140, 150, 0.3);
	}

	.imageItem1 {
		padding: 0;
		margin: 0;
		max-width: 90vw;
		width: 90vw;
	}

	.imageItem {
		padding: 0;
		margin: 0;
		max-width: 45vw;
		width: 45vw;
	}

	.iconImage {
		width: 25upx;
		height: 25upx;
	}

	.cmd {
		position: fixed;
		bottom: 15px;
		right: 15px;
		left: 15px;
		font-size: 20px;
		font-weight: 500;
		line-height: 20px;
		letter-spacing: 0px;
		color: #D8D8D8;
		border-radius: 14px;
		background-color: #000000;
	}

	.cmdFalse {
		visibility: hidden;
		height: 620rpx;
	}
</style>